<template>
  <div class="app-container myCheckAccept">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="所属公司">
        <treeselect style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company"
                    placeholder="请选择所属公司"/>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="selectForm.devicesName" placeholder="请输入设备名称" clearable size="small"/>
      </el-form-item>
      <el-form-item label="设备编号">
        <el-input v-model="selectForm.devicesId" placeholder="请输入设备编号" clearable size="small"/>
      </el-form-item>
      <el-form-item label="维修编号">
        <el-input v-model="selectForm.oddNumber" placeholder="请输入维修编号" clearable size="small"/>
      </el-form-item>
      <el-form-item label="报修人">
        <el-select size="small" v-model="selectForm.repairsUserId" placeholder="请选择" clearable>
          <el-option
            v-for="item in userlist"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型">
        <el-select size="small" v-model="selectForm.faultType" placeholder="请选择故障类型" clearable>
          <el-option
            v-for="item in faultTypeList"
            :key="item.faultTypeId"
            :label="item.faultTypeName"
            :value="item.faultTypeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故障描述">
        <el-input v-model="selectForm.repairsDescribe" placeholder="请输入故障描述" clearable size="small"/>
      </el-form-item>
      <el-form-item label="故障时间">
        <el-date-picker
          size="small"
          v-model="selectDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
        <el-button size="mini" type="warning" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="singleTable" :data="list" stripe border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="维修单号" width="150" prop="oddNumber">
        <template slot-scope="scope">
          <div class="bule" @click="details(scope.row)">{{scope.row.oddNumber}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" width="150" prop="deviceCode">
        <template slot-scope="scope">
          <div class="bule" @click="deviceDetails(scope.row)">{{scope.row.deviceCode}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" prop="devicesName"/>
      <el-table-column label="报障时间" align="center" prop="theRepairTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.theRepairTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="报修人" prop="repairsUserName"/>
      <el-table-column align="center" label="所属部门" prop="deptName"/>
      <el-table-column align="center" label="故障类型" prop="faultType"/>
      <el-table-column align="center" label="故障等级" prop="faultState">
        <template slot-scope="scope">
          <div class="status camBlue" v-if="scope.row.faultState==1">一般</div>
          <div class="status yellow" v-if="scope.row.faultState==2">严重</div>
          <div class="status red" v-if="scope.row.faultState==3">紧急</div>
          <div class="status blue" v-if="scope.row.faultState==4">技术改造</div>
        </template>
      </el-table-column>
      <el-table-column label="故障内容" property="repairsDescribe" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="checkAccept(scope.row)">验收
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="验收"
      :visible.sync="checkAcceptVisible"
      :close-on-click-modal="false"
      width="50%" class="checkAccept">
      <div style="max-width:600px;margin:auto;">
      <el-radio-group v-model="checkAcceptForm.verifyTheStatus">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">不通过</el-radio>
      </el-radio-group>
      <div class="grade" v-if="checkAcceptForm.verifyTheStatus==1">
        <span class="h4">评分</span>
        <i :class="checkAcceptForm.score<1?'el-icon-star-off':'el-icon-star-on'" @click="grade(1)"></i>
        <i :class="checkAcceptForm.score<2?'el-icon-star-off':'el-icon-star-on'" @click="grade(2)"></i>
        <i :class="checkAcceptForm.score<3?'el-icon-star-off':'el-icon-star-on'" @click="grade(3)"></i>
        <i :class="checkAcceptForm.score<4?'el-icon-star-off':'el-icon-star-on'" @click="grade(4)"></i>
        <i :class="checkAcceptForm.score<5?'el-icon-star-off':'el-icon-star-on'" @click="grade(5)"></i>
      </div>
      <div class="explain">
        <span class="h4">说明</span>
        <el-input type="textarea" v-model="checkAcceptForm.verificationResult"></el-input>
      </div>
      <!-- <el-checkbox v-model="checkAcceptForm.isStatus">将设备置为正常状态</el-checkbox> -->
      <div class="image">
        <span class="h4">设备文件</span>
        <el-upload
          :action="baseUrl()+'/common/upload'"
          :on-success="fileSuccess"
          :show-file-list="false"
          >
          <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
        </el-upload>
        <div class="unloadBox" v-if="checkAcceptForm.drfradList">
          <div class="file" v-for="(item,index) in checkAcceptForm.drfradList">
            <span class="index">{{index+1}}、</span>
            <span class="">{{item.accessoryName}}</span>
            <i class="el-icon-delete" @click="fileDel(index,item.accessoryUrl)"></i>
          </div>
          <!-- <div class="img" v-for="(item,index) in checkAcceptForm.drfradList">
            <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
            <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i>
          </div> -->
        </div>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="checkAcceptVisible=false">取消</el-button>
          <el-button size="mini" type="primary" @click="checkAcceptSumbit">确定</el-button>
        </span>
        
    </el-dialog>
    <equipment-des v-if="isDes" @subSetChane="subSetChane" :pid="pid"></equipment-des>
    <repairwork-des v-if="isRDes" @subSetChane="subRSetChane" :pid="rid"></repairwork-des>
  </div>
</template>

<script>
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import redeploy from "../../metrological/metrologicalTask/redeploy";
  import revocation from "../repairWorkOrder/revocation";
  import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import {listUser} from '@/api/inventory/index'
  import {reportRepairList,faultTypeList,reportForRepairRevoke,reportForRepairSure,reportRepairChange,reportForRepair} from '@/api/repair/index'
  import equipmentDes from '@/views/components/equipmentDetails'
  import repairworkDes from '@/views/maintain/repairWorkOrder/repairWorkOrderDetail'

  export default {
    components: {
      Treeselect,
      redeploy,
      revocation,
      equipmentDes,
      repairworkDes
    },
    name: "myCheckAccept.vue",
    data() {
      return {
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          state:3,
          repairsState:7
        },
        company: '',
        loading: false,//加载
        list: [],//数据
        total: 0,
        selectDate: '',//时间
        //验收
        checkAcceptVisible: false,
        checkAcceptForm: {
          verifyTheStatus: 1,
          score: 0,
          drfradList:[],
        },
        fileList: [],
        faultTypeList:[],
        userlist:[],

        isDes: false,
        pid: null,
        isRDes: false,
        rid: null,
      }
    },
    watch:{
      checkAcceptVisible(){
        if(!this.checkAcceptVisible){
          this.checkAcceptForm = {
              verifyTheStatus: 1,
              score: 0,
              drfradList:[],
            }
        }
      }
    },
    created() {
      this.getTree()
      this.getUserList()
      this.getfaultTypeList()
      this.getList()
    },
    methods: {
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      getUserList(){
        listUser().then((res)=>{
          if(res.code==200){
            this.userlist=res.rows
          }
        })
      },
      getfaultTypeList(){
        faultTypeList().then((res)=>{
          if(res.code==200){
            this.faultTypeList=res.rows
          }
        })
      },
      getList() {
        reportRepairList(this.selectForm).then((res)=>{
          this.list=res.rows
          this.total=res.total
        })
      },
      //更改时间
      dateChange() {
        this.selectForm.theRepairStartTime = this.selectDate&&this.selectDate[0]||null
        this.selectForm.theRepairEndTime = this.selectDate&&this.selectDate[1]||null
      },

      //验收
      checkAccept(row) {
        debugger
        this.checkAcceptForm.id=row.id
        this.checkAcceptForm.oddNumber=row.oddNumber
        this.checkAcceptVisible = true
      },
      //评分
      grade(i) {
        this.checkAcceptForm.score = i;
        console.log(this.checkAcceptForm.score);
      },
      fileSuccess(res) {
        //文件上传成功
        this.checkAcceptForm.drfradList.push({ accessoryName: res.fileName, accessoryUrl: res.filePath})
      },
      async fileDel(index, filePath){
          //删除文件
        await fileDelete(filePath)
        this.checkAcceptForm.drfradList.splice(index, 1)
      },
      // async imgDel(index,filePath){
      //   for(let i=0;i<this.checkAcceptForm.drfradList.length;i++){
      //     if(index==i){
      //       if(this.checkAcceptForm.drfradList[i].id){
      //         await fileDeleteLibrary(this.checkAcceptForm.drfradList[i].id)
      //       }else{
      //         await fileDelete(this.checkAcceptForm.drfradList.filePath);
      //       }
      //       this.checkAcceptForm.drfradList.splice(i, 1);
      //     }
      //   }
      // },
      checkAcceptSumbit(){
        reportForRepairSure(this.checkAcceptForm).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            this.checkAcceptVisible=false
            this.getList()
          }
        })
        
      },
      //维修单号详情
      details(row){
        // this.$router.push({path:'/maintain/repairWorkOrderDetail',query:{id:row.id}})
        this.rid=row.id
        this.isRDes=true
      },
      subRSetChane(){
        this.isRDes=false
        this.rid=null
      },
      //设备编号详情
      deviceDetails(row) {
        // this.$router.push({ path: '/equipmentGL/equipmentDetails', query: { data: row.devicesId } })
        // this.$router.push({path: '/maintain/repairWorkOrderDetailD', query: {data: row,name:'myCheckAccept',}})
        this.pid=row.devicesId
        this.isDes=true
      },
      subSetChane(){
        this.isDes=false
        this.pid=null
      },
    }
  }
</script>

<style lang="scss">
  .myCheckAccept {
    .bule {
      color: #2196F3;
      cursor: pointer;
    }

    .status {
      color: white;
      // width: 54px;
      padding: 0 5px;
      height: 22px;
      display: inline-block
    }

    .red {
      background: red;
    }

    .blue {
      background: #0070c0;
    }

    .camBlue {
      background: #8db3e2;
    }

    .yellow {
      background: yellow;
    }



    .btnCyan {
      background: #66C9B7;
      border: 1px solid #66C9B7
    }
    .checkAccept .el-dialog__body{
      height: 65vh;
      overflow: scroll;
      padding: 50px 0;
    }
    .checkAccept {
      .is-checked {
        .el-radio__label, .el-checkbox__label {
          color: #05A380;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner {
          background-color: #05A380;
          border-color: #05A380;
        }
      }

      .grade {
        margin: 15px 0 0;

        i {
          font-size: 20px;
        }
      }

      .explain {
        margin-top: 15px;

        .el-textarea {
          margin: 10px 0;
        }
      }

      .image {
        margin-top: 10px;

        .h4 {
          display: inline-block;
          margin-bottom: 10px;
        }
      }

      .h4 {
        line-height: 20px;
        color: #05A380;
        font-weight: bold;
        font-size: 15px;
        padding-right: 10px;
        margin:5px 0;
      }

    }
    .unloadBox {
      width: 100%;
      border: 1px solid #cccccc;
      margin-top: 20px;
      min-height: 50px;
      overflow: hidden;

      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }
      .file {
          width: 100%;
          border-top: 1px #cccccc dotted;
          line-height: 50px;

          .index {
            padding: 0 10px;
            color: #666
          }

          i {
            float: right;
            line-height: 50px;
            padding-right: 10px;
            font-size: 20px;
            cursor: pointer;
          }

        }
    }
  }
</style>
